<template>
	<view class="ge-body" :class="safeAreaBottom ? 'padding-safe-area-bottom' : ''">
		<van-nav-bar v-if="vanNavBarObj" fixed safe-area-inset-top placeholder z-index="10"
			:left-arrow="!vanNavBarObj.hideLeftArrow" :title="vanNavBarObj.title"
			:right-text="vanNavBarObj.rightText || ''" @click-left="onClickLeft" @click-right="onClickRight" />
		<slot></slot>
		<van-toast id="van-toast" class="ge-van-toast" />
		<van-dialog id="van-dialog" class="ge-van-dialog" />
		<view v-if="safeAreaBottom" class="safe-area-bottom" />
	</view>
</template>

<script>
	// #ifdef  MP-WEIXIN
	import vanNavBar from "@/wxcomponents/@vant/weapp/nav-bar/index"
	import vanToast from "@/wxcomponents/@vant/weapp/toast/index"
	import vanDialog from "@/wxcomponents/@vant/weapp/dialog/index"
	// #endif
	export default {
		name: 'ge-page',
		// #ifdef  MP-WEIXIN
		components: {
			vanNavBar,
			vanToast,
			vanDialog
		},
		// #endif
		props: {
			safeAreaBottom: {
				type: Boolean,
				default: true,
			},
			vanNavBarObj: {
				type: Object
			}
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight
			};
		},
		created() {

		},
		methods: {
			onClickLeft() {
				if (!this.vanNavBarObj.customClickLeft) {
					uni.navigateBack()
				}
				this.$emit('click-left')
			},
			onClickRight() {
				this.$emit('click-right')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ge-body {
		width: 100vw;
		box-sizing: border-box;
	}

	.padding-safe-area-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.safe-area-bottom {
		width: 100vw;
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	::v-deep .van-dialog {
		z-index: 100;
	}

	::v-deep .van-nav-bar--fixed {
		position: fixed;
	}
</style>
